<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<!-- include jQuery + carouFredSel plugin -->
<script type="text/javascript" src="/js/jquery-1.8.2.min.js"></script>
<script type="text/javascript"
	src="/js/carousel/jquery.carouFredSel-6.1.0-packed.js"></script>
<link href="/css/carousel/carouFredSel.css" rel="stylesheet"
	type="text/css" />

<script type='text/javascript'
	src='/js/menu/jquery.hoverIntent.minified.js'></script>
<script type='text/javascript' src='/js/menu/jquery.dcmegamenu.1.3.3.js'></script>
<link href="/css/multizoom/multizoom.css" rel="stylesheet"
	type="text/css" />
<link href="/css/menu/black.css" rel="stylesheet" type="text/css" />
<link href="/css/css.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/js/multizoom/multizoom.js"></script>
<script src='/js/lightbox/lightBox.js' type='text/javascript'></script>
<script src='/js/menu.view.js' type='text/javascript'></script>
<script src='/js/fullhappy.cookie.js' type='text/javascript'></script>
<script src='/js/product.view.js' type='text/javascript'></script>

<script>
	jQuery(document).ready(function($) {

		$('#gallery_container').carouFredSel({
			circular : false,
			infinite : false,
			auto : false,
			prev : {
				button : '#foo_prev',
				key : 'left'
			},
			next : {
				button : '#foo_next',
				key : 'right'
			},
			pagination : '#foo_pag'
		});
	});
/*
	jQuery(document).ready(function($) {
		$('#mega-menu-2').dcMegaMenu({
			rowItems : '4',
			speed : 'fast',
			effect : 'slide'
		});
	});
*/
	jQuery(document).ready(function($) {
		$('#images_selected').addimagezoom({
			magnifiersize : [ 300, 300 ]
		});
	});
	function slideFocus(_img) {

		var d = _img.parentNode.parentNode.parentNode;
		var d1 = d.getElementsByTagName('div')[0].getElementsByTagName('img')[0];
		d1.src = _img.src;
		d1.removeAttribute("style");
		/*var m = document.getElementsByClassName('featuredimagezoomerhidden magnifyarea')[0].getElementsByTagName('img')[0];
		m.src=_img.src;*/
		(function($) {
			$('#images_selected').addimagezoom({
				magnifiersize : [ 300, 300 ]
			});

		})(jQuery);
	}

	function addFocusEven(pagination) {
		var images = pagination.getElementsByTagName('img');
		for ( var i = 0; i < images.length; i++) {
			var image = images[i];
			image.setAttribute('onclick', 'slideFocus(this)');
		}
	}

</script>


<style>
</style>




<style>
.product_view {
	clear: both;
	padding-top: 40px;
	height: 520px;
}

.product_view .images_slide {
	box-shadow: 0 0 5px #000000;
	width: 300px;
	margin: 0 20px;
	float: left;
}

.product_view .images_slide .images_selected_contenner {
	height: 400px;
	width: 300px;
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	border-bottom: 4px solid #d0d0d0
}

.product_view .images_slide .images_selected_contenner .images_selected{
	max-height: 400px;
	max-width: 300px;
}

.product_view .images_slide footer {
	position: relative;
	margin: 4px 0;
	width: 300px;
	overflow: hidden;
	height: 88px;
}

.product_view .images_slide footer .image_pagination {
	position: absolute;
	left: 0;
	top: 0;
	height: 84px;
	width: 900px;
	padding: 2px 0;
}

.product_view .images_slide footer .image_pagination img {
	height: 80px;
	margin: 0 3px;
	width: 54px;
	cursor: pointer;
}

.product_view .images_slide footer .image_pagination img:hover {
	box-shadow: 0px 0px 2px #000;
}

.product_view .detail {
	float: right;
	width: 530px;
	padding-right: 20px
}

.product_view .detail header {
	background: -webkit-gradient(linear, center top, center bottom, from(#EFEFEF),
		to(white) );
	background: -moz-linear-gradient(center top, #EFEFEF, #FFFFFF) repeat
		scroll 0 0 transparent;
	border-top: 1px solid #E5E5E5;
	min-height: 45px;
	padding: 10px;
	width: 510px
}

.product_view .detail header span {
	color: #333333;
	font-size: 24px;
	font-weight: bold;
	padding-left: 10px;
	text-shadow: 1px 1px 2px #D0D0D0;
}

.product_view .detail .description {
	border: 1px solid #D0D0D0;
	font-size: 13px;
	height: 300px;
	line-height: 18px;
	padding: 20px;
}

.product_view .detail footer {
	display: table-cell;
	padding: 10px;
	vertical-align: middle;
}

.detail footer .price_title {
	
}

.product_view .detail footer .price {
	color: #FF6600;
	font-size: 24px;
	font-weight: bold;
	text-shadow: 1px 1px 1px #ccc;
	margin-top: 5px;
}
</style>

</head>
<body>
	<header style="height: 100px;"> </header>
	<div id="menu" class="black"></div>
	<script>
		var admin = true;
		new Menu().loadMenuData();
	</script>

	<div id="_body">
		<div style="border-bottom: 1px solid #DDDDDD; height: 30px;"></div>
		<section id="product_view" class="product_view">
			
		</section>

			<script>
							var pathname = window.location.pathname;
							var productId = pathname.split('/')[pathname.split('/').length-1];
                            var pr = new ProductView();
							pr.loadProductData('product_view',productId);
			</script>
			
		<section class="image_carousel">
			<div class="pagination1">dfsdfg</div>
			<div id="gallery_container" class="gallery_container">
				<article>
					<img
						src="http://caroufredsel.dev7studios.com/examples/images/small/basketball.jpg"
						alt="basketball" width="180" height="140" />
					<footer>
						<div class="title">Footer content</div>
						<div class="price">2500 VND</div>
					</footer>

				</article>
				<article>
					<img
						src="http://caroufredsel.dev7studios.com/examples/images/small/beachtree.jpg"
						alt="beachtree" width="180" height="140" />
					<footer>
						<div class="title">Footer content</div>
						<div class="price">2500 VND</div>
					</footer>
				</article>
				<article>
					<img
						src="http://caroufredsel.dev7studios.com/examples/images/small/cupcackes.jpg"
						alt="cupcackes" width="180" height="140" />
					<footer>
						<div class="title">Footer content</div>
						<div class="price">2500 VND</div>
					</footer>
				</article>
				<article>
					<img
						src="http://caroufredsel.dev7studios.com/examples/images/small/hangmat.jpg"
						alt="hangmat" width="180" height="140" />
					<footer>
						<div class="title">Footer content</div>
						<div class="price">2500 VND</div>
					</footer>
				</article>
				<article>
					<img
						src="http://caroufredsel.dev7studios.com/examples/images/small/new_york.jpg"
						alt="new york" width="180" height="140" />
					<footer>
						<div class="title">Footer content</div>
						<div class="price">2500 VND</div>
					</footer>
				</article>
				<article>
					<img
						src="http://caroufredsel.dev7studios.com/examples/images/small/laundry.jpg"
						alt="laundry" width="180" height="140" />
					<footer>
						<div class="title">Footer content</div>
						<div class="price">2500 VND</div>
					</footer>
				</article>
				<article>
					<img
						src="http://caroufredsel.dev7studios.com/examples/images/small/mom_son.jpg"
						alt="mom son" width="180" height="140" />
					<footer>
						<div class="title">Footer content</div>
						<div class="price">2500 VND</div>
					</footer>
				</article>
				<article>
					<img
						src="http://caroufredsel.dev7studios.com/examples/images/small/picknick.jpg"
						alt="picknick" width="180" height="140" />
					<footer>
						<div class="title">Footer content</div>
						<div class="price">2500 VND</div>
					</footer>
				</article>
				<article>
					<img
						src="http://caroufredsel.dev7studios.com/examples/images/small/shoes.jpg"
						alt="shoes" width="180" height="140" />
					<footer>
						<div class="title">Footer content</div>
						<div class="price">2500 VND</div>
					</footer>
				</article>
				<article>
					<img
						src="http://caroufredsel.dev7studios.com/examples/images/small/paris.jpg"
						alt="paris" width="180" height="140" />
					<footer>
						<div class="title">Footer content</div>
						<div class="price">2500 VND</div>
					</footer>
				</article>
				<article>
					<img
						src="http://caroufredsel.dev7studios.com/examples/images/small/sunbading.jpg"
						alt="sunbading" width="180" height="140" />
					<footer>
						<div class="title">Footer content</div>
						<div class="price">2500 VND</div>
					</footer>
				</article>
				<article>
					<img
						src="http://caroufredsel.dev7studios.com/examples/images/small/yellow_couple.jpg"
						alt="yellow couple" width="180" height="140" />
					<footer>
						<div class="title">Footer content</div>
						<div class="price">2500 VND</div>
					</footer>
				</article>
			</div>
			<div class="clearfix"></div>
			<a class="prev" id="foo_prev" href="#"><span>prev</span></a> <a
				class="next" id="foo_next" href="#"><span>next</span></a>
			<div class="pagination" id="foo_pag"></div>
		</section>


	</div>
	<footer style="height: 100px"> </footer>
</body>
</html>
